﻿<div
    class="h-full flex flex-col bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700 transition-all duration-300 @(IsCollapsed ? "navbar-collapsed" : "navbar-expanded")"
    style="@(IsCollapsed ? "width: 70px;" : "")">
    <!-- 侧边栏头部 -->
    <div class="px-3 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
        <a href="@RouterMap.Index" class="flex justify-center items-center @(IsCollapsed ? "w-full" : "")">
            @if (IsCollapsed) {
                <img src="images/ClipifyLogo.png" alt="Clipify" class="w-10 h-10">
            }
            else {
                <img src="images/ClipifyLogoHorizontal.png" alt="Clipify Logo" class="w-40 h-auto">
            }
        </a>
        <button @onclick="ToggleNavbar"
                class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
            <i class="@(IsCollapsed ? "fa-solid fa-chevron-right" : "fa-solid fa-chevron-left")"></i>
        </button>
    </div>

    <!-- 快速操作按钮 -->
    <div class="px-3 py-2 border-b border-gray-200 dark:border-gray-700">
        @if (IsCollapsed) {
            <button @onclick="OpenFileDialog"
                    class="w-full flex items-center justify-center p-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800">
                <i class="fa-solid fa-file-video"></i>
            </button>
        }
        else {
            <button @onclick="OpenFileDialog"
                    class="w-full flex items-center justify-center py-2 px-4 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800">
                <i class="fa-solid fa-file-video me-2"></i>
                打开视频文件
            </button>
        }
    </div>

    <!-- 导航菜单 -->
    <div class="flex-1 px-3 py-4 overflow-y-auto">
        <div class="mb-2">
            @if (!IsCollapsed) {
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-2 dark:text-gray-400">
                    基础功能
                </p>
            }
            <ul class="space-y-1 font-medium">
                <li>
                    <NavLink href="@RouterMap.Index" ActiveClass="@GetActiveClass()" Match="NavLinkMatch.All"
                             class="@(GetNavItemClass())">
                        <i class="fa-solid fa-house text-lg text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400"></i>
                        @if (!IsCollapsed) {
                            <span class="ms-3">主页</span>
                        }
                    </NavLink>
                </li>
                <li>
                    <NavLink href="@RouterMap.VideoSplit" ActiveClass="@GetActiveClass()"
                             class="@(GetNavItemClass())">
                        <i class="fa-solid fa-scissors text-lg text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400"></i>
                        @if (!IsCollapsed) {
                            <span class="flex-1 ms-3 whitespace-nowrap">视频分割</span>
                            <span
                                class="inline-flex items-center justify-center px-2 py-0.5 ms-3 text-xs font-medium text-blue-700 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">热门</span>
                        }
                    </NavLink>
                </li>
                <li>
                    <NavLink href="@RouterMap.ExtractAudio" ActiveClass="@GetActiveClass()"
                             class="@(GetNavItemClass())">
                        <i class="fa-solid fa-music text-lg text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400"></i>
                        @if (!IsCollapsed) {
                            <span class="flex-1 ms-3 whitespace-nowrap">提取音频</span>
                        }
                    </NavLink>
                </li>
            </ul>
        </div>

        <div class="pt-4 mb-2">
            @if (!IsCollapsed) {
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-2 dark:text-gray-400">
                    视频编辑
                </p>
            }
            <ul class="space-y-1 font-medium">
                <li>
                    <NavLink href="#" @onclick='() => ShowFeatureInDev("片段裁剪")'
                             class="@(GetDisabledNavItemClass())">
                        <i class="fa-solid fa-hand-scissors text-lg text-gray-400 dark:text-gray-500"></i>
                        @if (!IsCollapsed) {
                            <span class="flex-1 ms-3 whitespace-nowrap">片段裁剪</span>
                            <span
                                class="inline-flex items-center justify-center px-2 py-0.5 ms-3 text-xs font-medium text-gray-600 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-400">开发中</span>
                        }
                    </NavLink>
                </li>
                <li>
                    <NavLink href="#" @onclick='() => ShowFeatureInDev("片段移除")'
                             class="@(GetDisabledNavItemClass())">
                        <i class="fa-solid fa-eraser text-lg text-gray-400 dark:text-gray-500"></i>
                        @if (!IsCollapsed) {
                            <span class="flex-1 ms-3 whitespace-nowrap">片段移除</span>
                            <span
                                class="inline-flex items-center justify-center px-2 py-0.5 ms-3 text-xs font-medium text-gray-600 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-400">开发中</span>
                        }
                    </NavLink>
                </li>
                <li>
                    <NavLink href="#" @onclick='() => ShowFeatureInDev("视频合并")'
                             class="@(GetDisabledNavItemClass())">
                        <i class="fa-regular fa-object-group text-lg text-gray-400 dark:text-gray-500"></i>
                        @if (!IsCollapsed) {
                            <span class="flex-1 ms-3 whitespace-nowrap">视频合并</span>
                            <span
                                class="inline-flex items-center justify-center px-2 py-0.5 ms-3 text-xs font-medium text-gray-600 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-400">开发中</span>
                        }
                    </NavLink>
                </li>
            </ul>
        </div>
        
        <div class="pt-4 mb-2">
            @if (!IsCollapsed) {
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-2 dark:text-gray-400">
                    高级功能
                </p>
            }
            <ul class="space-y-1 font-medium">
                <li>
                    <NavLink href="#" @onclick='() => ShowFeatureInDev("字幕识别")'
                             class="@(GetDisabledNavItemClass())">
                        <i class="fa-regular fa-closed-captioning text-lg text-gray-400 dark:text-gray-500"></i>
                        @if (!IsCollapsed) {
                            <span class="flex-1 ms-3 whitespace-nowrap">字幕识别</span>
                            <span
                                class="inline-flex items-center justify-center px-2 py-0.5 ms-3 text-xs font-medium text-purple-700 bg-purple-100 rounded-full dark:bg-purple-900 dark:text-purple-300">Pro</span>
                        }
                    </NavLink>
                </li>
                <li>
                    <NavLink href="#" @onclick='() => ShowFeatureInDev("视频压缩")'
                             class="@(GetDisabledNavItemClass())">
                        <i class="fa-solid fa-compress-alt text-lg text-gray-400 dark:text-gray-500"></i>
                        @if (!IsCollapsed) {
                            <span class="flex-1 ms-3 whitespace-nowrap">视频压缩</span>
                            <span
                                class="inline-flex items-center justify-center px-2 py-0.5 ms-3 text-xs font-medium text-gray-600 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-400">开发中</span>
                        }
                    </NavLink>
                </li>
            </ul>
        </div>
    </div>

    <!-- 底部用户区域 -->
    <div class="px-3 py-2 border-t border-gray-200 dark:border-gray-700">
        <div class="flex items-center @(IsCollapsed ? "justify-center" : "")">
            <div class="flex-shrink-0">
                <div
                    class="@(IsCollapsed ? "w-10 h-10" : "w-12 h-12") rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                    <i class="fa-solid fa-user text-blue-600 dark:text-blue-400"></i>
                </div>
            </div>
            @if (!IsCollapsed) {
                <div class="ms-3">
                    <p class="text-sm font-medium text-gray-900 dark:text-white">当前用户</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">开源 & 免费</p>
                </div>
                <button type="button"
                        class="ms-auto text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
                    <i class="fa-solid fa-cog"></i>
                </button>
            }
        </div>
    </div>
</div>

<style>
    .navbar-collapsed {
        min-width: 70px;
        max-width: 70px;
    }

    .navbar-expanded {
        min-width: 250px;
        max-width: 250px;
    }
</style>

@code {
    [Inject] private INotificationService NotiService { get; set; }

    [Inject] private IMessageService MsgService { get; set; }

    [Parameter] public bool IsCollapsed { get; set; } = false;

    [Parameter] public EventCallback<bool> IsCollapsedChanged { get; set; }

    // 添加计算属性，用于生成正确的CSS类
    private string GetNavItemClass(bool isActive = false) =>
        $"flex items-center p-2 {(isActive ? "text-blue-700" : "text-gray-900")} rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group {(IsCollapsed ? "justify-center" : "")}";

    private string GetDisabledNavItemClass() =>
        $"flex items-center p-2 text-gray-500 rounded-lg dark:text-gray-400 group cursor-default {(IsCollapsed ? "justify-center" : "")}";

    private string GetActiveClass() =>
        IsCollapsed ? "bg-blue-50" : "bg-blue-50 text-blue-700";

    private async Task ToggleNavbar() {
        IsCollapsed = !IsCollapsed;
        await IsCollapsedChanged.InvokeAsync(IsCollapsed);
    }

    private async Task ShowFeatureInDev(string featureName) {
        RenderFragment customIcon = @<i class="fa-solid fa-code-branch text-2xl text-blue-500"></i>;
        await NotiService.Open(new NotificationConfig {
            Message = $"{featureName} - 开发中",
            Description = $"{featureName}功能正在开发中，敬请期待！",
            Icon = customIcon
        });
    }

    private async Task OpenFileDialog() {
        await MsgService.Success("文件选择器：即将打开文件选择器，请选择要编辑的视频文件。");
        // 这里实际项目中应该调用文件选择器
    }

}